<!DOCTYPE html>
<html>
<head>
<title>调色板</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="none">
<style>
body{
	font-size:12px; font-family:Arial,宋体; 
	background-color:#dcdcdc;
}
td,select,div,span,button { font-size:12px; font-family:Arial,宋体; }
button	{ width:60px; border-width:1px; }
input	{ border: 1px solid black; font-size:12px; padding:1px 4px;}
.title	{ font-weight:bold; }
a:link	{ color:#0000BB; }
a:visited	{ color:#0000BB; }
.colorDiv	{ float:left; width:10px; height:10px; margin:3px; border:1px #000000 solid; cursor:pointer; }
</style>

<script language='javascript' type='text/javascript'>
var SelRGB = '#000000';
var DrRGB = '';
var SelGRAY = '120';

var hexch = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F');

function $id(str){
	return document.getElementById(str);
}
function ToHex(n){
	var h, l;

	n = Math.round(n);
	l = n % 16;
	h = Math.floor((n / 16)) % 16;
	return (hexch[h] + hexch[l]);
}

function DoColor(c, l){
	var r, g, b;

	r = '0x' + c.substring(1, 3);
	g = '0x' + c.substring(3, 5);
	b = '0x' + c.substring(5, 7);
  
	if(l > 120){
		l = l - 120;

		r = (r * (120 - l) + 255 * l) / 120;
		g = (g * (120 - l) + 255 * l) / 120;
		b = (b * (120 - l) + 255 * l) / 120;
	}else{
		r = (r * l) / 120;
		g = (g * l) / 120;
		b = (b * l) / 120;
	}
	return '#' + ToHex(r) + ToHex(g) + ToHex(b);
}

function EndColor(){
	var i;

	if(DrRGB != SelRGB){
		DrRGB = SelRGB;
		for(i = 0; i <= 30; i ++)
			$id("GT_row"+ i).style.background = DoColor(SelRGB, 240 - i * 8);
	}

	$id("SelColor").value = DoColor($id("RGB").innerText, $id("GRAY").innerText);
	$id("ShowColor").bgColor = $id("SelColor").value;
}

function CT_click(str){
	SelRGB = str;
	EndColor();
}
function CT_over(str){
	$id("RGB").innerText = str.toUpperCase();
	EndColor();
}
function CT_out(str){
	$id("RGB").innerText = SelRGB;
	EndColor();
}
function GT_click(str){
	SelGRAY = str;
	EndColor();
}
function GT_over(str){
	$id("GRAY").innerText = str;
	EndColor();
}
function GT_out(str){
	$id("GRAY").innerText = SelGRAY;
	EndColor();
}

function ColorDiv(str){
	var isRet		= ToGetStr("isRet");
	var retMode		= ToGetStr("retMode");
	var inputName	= ToGetStr("inputName");
	var input2Name	= ToGetStr("input2Name");
	if (isRet == 1){
		if (retMode=="input"){
			opener.document.getElementById(inputName).value = str;
			opener.document.getElementById(input2Name).style.color = str;
		}else if (retMode=="function"){
			opener.DealColorBox(str);
		}
	}else{
		window.returnValue = str;
	}
	window.close();
}

function OkClick(){
	var isRet		= ToGetStr("isRet");
	var retMode		= ToGetStr("retMode");
	var inputName	= ToGetStr("inputName");
	var input2Name	= ToGetStr("input2Name");
	if (isRet == 1){
		if (retMode=="input"){
			opener.document.getElementById(inputName).value = $id("SelColor").value;
			opener.document.getElementById(input2Name).style.color = $id("SelColor").value;
		}else if (retMode=="function"){
			opener.DealColorBox($id("SelColor").value);
		}
	}else{
		window.returnValue = $id("SelColor").value;
	}
	window.close();
}

function ToGetStr(name){
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if(r!=null)return  unescape(r[2]); return null;
}
</script>


</head>
<body>


<table align="center" border="0" cellspacing="5" cellpadding="0"><tr><td>

<table id="ColorTable" border="0" cellspacing="0" cellpadding="0" style='cursor:pointer;'>
<script language='javascript' type='text/javascript'>
function wc(r, g, b, n){
	r = ((r * 16 + r) * 3 * (15 - n) + 0x80 * n) / 15;
	g = ((g * 16 + g) * 3 * (15 - n) + 0x80 * n) / 15;
	b = ((b * 16 + b) * 3 * (15 - n) + 0x80 * n) / 15;

	document.write('<td style="background:#' + ToHex(r) + ToHex(g) + ToHex(b) + ';width:8px;height:8px;" onclick="CT_click(\'#' + ToHex(r) + ToHex(g) + ToHex(b) + '\');" onmouseover="CT_over(\'#' + ToHex(r) + ToHex(g) + ToHex(b) + '\');" onmouseout="CT_out(\'#' + ToHex(r) + ToHex(g) + ToHex(b) + '\');"></td>');
}

var cnum = new Array(1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0);

for(i = 0; i < 16; i ++){
	document.write('<tr>');
	for(j = 0; j < 30; j ++){
		n1 = j % 5;
		n2 = Math.floor(j / 5) * 3;
		n3 = n2 + 3;

		wc((cnum[n3] * n1 + cnum[n2] * (5 - n1)),
		(cnum[n3 + 1] * n1 + cnum[n2 + 1] * (5 - n1)),
		(cnum[n3 + 2] * n1 + cnum[n2 + 2] * (5 - n1)), i);
	}

	document.writeln('</tr>');
}
</script>
</table>

</td><td>

<table id="GrayTable" border="0" cellspacing="0" cellpadding="0" style='cursor:pointer;'>
<script language='javascript' type='text/javascript'>
	var GT_num=0;
	for(i = 255; i >= 0; i -= 8.5){
		document.write('<tr id="GT_row'+ GT_num +'" style="background:#' + ToHex(i) + ToHex(i) + ToHex(i) + ';"><td title="'+ Math.floor(i * 16 / 17) +'" style="height:4px;width:20px;" onclick="GT_click(\''+ Math.floor(i * 16 / 17) +'\');" onmouseover="GT_over(\''+ Math.floor(i * 16 / 17) +'\');" onmouseout="GT_out(\''+ Math.floor(i * 16 / 17) +'\');"></td></tr>');
		GT_num++;
	}
</script>
</table>

</td></tr>
</table>



<table align="center" border="0" cellspacing="10" cellpadding="0" width="290">
<tr><td rowspan="2" align="center" width="70">
	<table id="ShowColor" bgcolor="#000000" border="1" width="50" height="40" cellspacing="0" cellpadding="0">
	<tr><td></td></tr>
	</table>
</td>
<td rowspan="2">
	基色 : <span id="RGB">#000000</span><br />
	亮度 : <span id="GRAY">120</span><br />
	代码 : <input type="text" size="7" id="SelColor" value="#000000" />
</td>
<td width="50">
	<input type="button" id="Ok" onclick="OkClick();" value="确定" />
</td></tr>
<tr><td width="50">
	<input type="button" onclick="window.close();" value="关闭" />
</td></tr>
</table>

&ensp;快捷：
<div class="colorDiv" style="background:#000000;" onclick="ColorDiv('#000000')" title="黑色"></div>
<div class="colorDiv" style="background:#ff0000;" onclick="ColorDiv('#ff0000')" title="红色"></div>
<div class="colorDiv" style="background:#ffa500;" onclick="ColorDiv('#ffa500')" title="橙色"></div>
<div class="colorDiv" style="background:#ffff00;" onclick="ColorDiv('#ffff00')" title="黄色"></div>
<div class="colorDiv" style="background:#008000;" onclick="ColorDiv('#008000')" title="绿色"></div>
<div class="colorDiv" style="background:#4b0082;" onclick="ColorDiv('#4b0082')" title="青色"></div>
<div class="colorDiv" style="background:#0000ff;" onclick="ColorDiv('#0000ff')" title="蓝色"></div>
<div class="colorDiv" style="background:#800080;" onclick="ColorDiv('#800080')" title="紫色"></div>
<div class="colorDiv" style="background:#a52a2a;" onclick="ColorDiv('#a52a2a')" title="棕色"></div>
<div class="colorDiv" style="background:#ee82ee;" onclick="ColorDiv('#ee82ee')" title="紫罗兰色"></div>
<div class="colorDiv" style="background:#ffc0cb;" onclick="ColorDiv('#ffc0cb')" title="粉色"></div>
<div class="colorDiv" style="background:#642100;" onclick="ColorDiv('#642100')" title=""></div>
<div class="colorDiv" style="background:#336666;" onclick="ColorDiv('#336666')" title=""></div>
<div class="colorDiv" style="background:#484891;" onclick="ColorDiv('#484891')" title=""></div>
<div class="colorDiv" style="background:#dcdcdc;" onclick="ColorDiv('#dcdcdc')" title="灰色"></div>
<div class="colorDiv" style="background:#ffffff;" onclick="ColorDiv('#ffffff')" title="白色"></div>
</body>   
</html>
